{% extends "website/staff/staff_base.html" %}
{% block staff_content %}
<section class="section">
  <div class="card">
    <div class="card-title">
      <div class="icon">👥</div>
      <div>
        <h1 class="h1" style="margin:0">Staff Users & Roles</h1>
        <div class="small">Manage authorized healthcare staff accounts and professional roles.</div>
      </div>
      <div style="margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center">
        <a class="btn" href="{% url 'website:staff_user_create' %}">+ New Staff</a>
        <a class="btn btn-ghost" href="#" data-export="csv">Export CSV</a>
        <a class="btn btn-ghost" href="#" data-export="pdf">Export PDF</a>
      </div>
    </div>

    <div class="sep"></div>

    <form method="get" class="row" style="gap:10px;flex-wrap:wrap;align-items:flex-end">
      <input class="input" style="max-width:320px" type="text" name="q" value="{{ q|default:'' }}" placeholder="Search name / username / email" />
      <label class="small">Role
        <select class="input" name="role">
          <option value="">All</option>
          <option value="Doctor" {% if role == "Doctor" %}selected{% endif %}>Doctor</option>
          <option value="Nurse" {% if role == "Nurse" %}selected{% endif %}>Nurse</option>
          <option value="Caregiver" {% if role == "Caregiver" %}selected{% endif %}>Caregiver</option>
          <option value="Care Coordinator" {% if role == "Care Coordinator" %}selected{% endif %}>Care Coordinator</option>
          <option value="Receptionist" {% if role == "Receptionist" %}selected{% endif %}>Receptionist</option>
          <option value="HR Manager" {% if role == "HR Manager" %}selected{% endif %}>HR Manager</option>
          <option value="Admin" {% if role == "Admin" %}selected{% endif %}>Admin</option>
        </select>
      </label>
      <button class="btn" type="submit">Apply</button>
      <a class="btn btn-ghost" href="{% url 'website:staff_user_list' %}">Reset</a>
    </form>

    <div class="sep"></div>

    <div class="table-wrap">
      <table class="table">
        <thead>
          <tr>
            <th><a class="sort-link" href="#" data-sort="id">ID <span class="sort-icon"></span></a></th>
            <th><a class="sort-link" href="#" data-sort="username">Username <span class="sort-icon"></span></a></th>
            <th><a class="sort-link" href="#" data-sort="first_name">Name <span class="sort-icon"></span></a></th>
            <th>Email</th>
            <th>Roles</th>
            <th><a class="sort-link" href="#" data-sort="last_login">Last login <span class="sort-icon"></span></a></th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for u in users %}
          <tr>
            <td>#{{ u.id }}</td>
            <td>{{ u.username }}</td>
            <td>{{ u.get_full_name|default:u.username }}</td>
            <td class="small">{{ u.email }}</td>
            <td class="small">
              {% for g in u.groups.all %}<span class="pill">{{ g.name }}</span> {% empty %}—{% endfor %}
            </td>
            <td class="small">{% if u.last_login %}{{ u.last_login|date:"Y-m-d H:i" }}{% else %}—{% endif %}</td>
            <td><a class="btn" href="{% url 'website:staff_user_edit' u.id %}">Edit</a></td>
          </tr>
          {% empty %}
          <tr><td colspan="7" class="small">No staff users found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    
<div class="row" style="justify-content:space-between;align-items:center;margin-top:12px;gap:10px;flex-wrap:wrap">
  <div class="small">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }} · {{ page_obj.paginator.count }} records</div>
  <div class="row" style="gap:6px;flex-wrap:wrap">
    {% if page_obj.has_previous %}
      <a class="btn btn-ghost" href="?{% if request.GET %}{{ request.GET.urlencode|cut:'page='|cut:'&&' }}&{% endif %}page={{ page_obj.previous_page_number }}">← Prev</a>
    {% endif %}
    {% if page_obj.has_next %}
      <a class="btn btn-ghost" href="?{% if request.GET %}{{ request.GET.urlencode|cut:'page='|cut:'&&' }}&{% endif %}page={{ page_obj.next_page_number }}">Next →</a>
    {% endif %}
  </div>
</div>

  </div>
</section>
{% endblock %}